<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/index.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        canvas{
            margin: 50px auto 0;
            display: block;
            background: yellow;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
</body>
<script>
    let ctx = document.getElementById('canvas');
    // 获取webgl上下文
    let gl = ctx.getContext('webgl')
    // 顶点着色器
    let VERTEX_SHADER_SOURCE = `
        attribute vec4 aPosition;
        attribute float aPointSize;
        void main(){
            gl_Position = aPosition;
            gl_PointSize = aPointSize;
        }
    `;
    // 片元着色器
    const FRAGMENT_SHADER_SOURCE = `
        void main(){
            gl_FragColor = vec4(1.0, 0.0, 0.1, 1.0);
        }
    `;
    let program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)
    // 获取 attribute变量，必须在initShader之后
    let aPosition = gl.getAttribLocation(program, 'aPosition')

    // 创建一组顶点数据   Float32Array类型化数组，用这个数组，既可以知道里面是数据类型
    let points = new Float32Array([
        -0.5,-0.5, 10.0,  // 10.0
        0.5,-0.5, 20.0, // 20.0
        0.0,0.5, 30.0, // 30.0
    ])
    // 创建缓冲区
    let buffer = gl.createBuffer();
    // 将缓冲区对象 绑定到 webgl上
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    // 将顶点数据 写入 缓冲区对象
    gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);
    // 给顶点赋值 指定给aPosition attribute变量
    // false 归一化，我们本来就是0-1之间的数据，所以不需要归一化。
    // 相邻数据的字节数 0 字节数如何获取  几个数据能表示一个信息，就乘以几
    let BYTES = points.BYTES_PER_ELEMENT;
    // 偏移量 每一次数据使用两个，都是连续的，所以不需要偏移量
    gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, BYTES * 3, 0 )
    // 激活attribute变量  gl.disableVertexAttribArray(aPosition); 使⽤此⽅法禁⽤
    gl.enableVertexAttribArray(aPosition);

    // 创建尺寸大小信息  第二个缓冲区
    let aPointSize = gl.getAttribLocation(program, 'aPointSize')
    // 偏移量 不能直接写2  要写BYTES * 2
    gl.vertexAttribPointer(aPointSize, 1, gl.FLOAT, false, BYTES * 3, BYTES * 2)
    gl.enableVertexAttribArray(aPointSize)

    // 执行绘制 绘制三个顶点
    gl.drawArrays(gl.POINTS, 0, 3);
</script>
</html>
